input[type=file]

发表于

当使用input[type=file]上传图片功能时，通常有些问题。简要记录。

html5上传类型

1
2
3
4
5
6
<!-- html5上传 -->
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
<input type="file" accept="image/*;capture=camera"><!-- 直接调用相机（测试安卓可以，iphone还是有相册） -->
<input type="file" accept="image/*" /><!-- 调用相机 图片或者相册 -->
<input type="file" multiple accept="image/*" /><!-- 调用相册 -->

获取方式

window.URL || window.webkitURL

Window.URL 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 URL 对象。

该方法存目前属于实验特性，存在兼容性如下所示：

兼容性

1
<input type="file" onchange="changeImg(this)">
1
2
3
4
5
6
7
8
9
changeImg(file){
  let url = window.URL || window.webkitURL;
  console.log(url.createObjectURL(file.files[0]));//files是一个选中的数组
  let img = new Image();//创建Image对象
  img.src = url.createObjectURL(file.files[0]);//创建Image的对象的url
  img.onload = function () {
      console.log('height:'+this.height+'----width:'+this.width)
  }
}

HTML5中的FileReader

1
<input type="file" onchange="checkImg(this)">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
checkImg(file){
  let reader = new FileReader();
  reader.readAsDataURL(file.files[0]);//将文件base64编码
  reader.onload = function(e){
      let img = new Image();
      let filesize = file.files[0].size/1024;//转化bit ==> KB
      img.src = e.target.result;//获取编码后的值,也可以用this.result获取
      img.onload = function () {
          let height = this.height;
          let width = this.width;
          if(width!=80 && height!=80){
              console.log('请上传80*80像素的图片');
          }else if(filesize>100){
              console.log('请上传最大不超过100K的图片!');
          }else{
              console.log('符合要求！');
          }
      }
  }
}

简单封装jquery库

实现jquery+html5+canvas实现图片、预览、压缩、上传。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
(function($){
    $.fn.extend({
        aiiUpload:function(obj)
        {
            if(typeof obj !="object")
            {
                alert('参数错误');
                return;
            }
            var imageWidth,imageHeight;
            var base64;
            var file_num=0;
            var fileInput=$(this);
            var fileInputId=fileInput.attr('id');
            createDoc('#'+fileInputId,obj.method,obj.action);
            $('#aii_file').change(function(){
                if(test(this.value)==false)
                {
                    alert('格式错误');
                    return;
                }
                var objUrl = getObjectURL(this.files[0]);
                if (objUrl)
                {
                    imgBefore(objUrl,file_num);
                    render(objUrl,obj.max_h,obj.max_w,file_num);
                    file_num++;
                }
            });
        }
    });
    function createDoc(objID,form_method,form_action)
    {
        var element=$(objID);
        element.append('<ul class="viewList"></ul>').append('<div class="fileBox"><input type="file"  id="aii_file" /><div class="file_bg"></div></div>').append('<form id="aii_upload_form" method="'+form_method+'" action="'+form_action+'"></form>').append('<canvas id="canvas"></canvas>');
    }
    function test(value)
    {
        var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$",'g');
        return regexp.test(value);
    }
    function render(src,MaximgW,MaximgH,idnum)
    {
        var image=new Image();
        image.onload=function()
        {
            var canvas=document.getElementById('canvas');
            if(image.width>image.height)
            {
                imageWidth=MaximgW;
                imageHeight=MaximgH*(image.height/image.width);
            }
            else if(image.width<image.height)
            {
                imageHeight=MaximgH;
                imageWidth=MaximgW*(image.width/image.height);
            }
            else
            {
                imageWidth=MaximgW;
                imageHeight=MaximgH;
            }
            canvas.width=imageWidth;
            canvas.height=imageHeight;
            var con=canvas.getContext('2d');
            con.clearRect(0,0,canvas.width,canvas.height);
            con.drawImage(image,0,0,imageWidth,imageHeight);
            base64=canvas.toDataURL('image/jpeg',0.5).substr(22);
            add_doc(base64,idnum);
        }
        image.src=src;
    };
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url;
    }
    //预览
    function imgBefore(objUrl,idnum)
    {
        var li='<li class="view"><img src="'+objUrl+'" id="aiiImg_'+idnum+'" idnum="'+idnum+'" /><div class="close" onclick="img_remove(this);"></div></li>'
        $('.viewList').append(li);
        var img=$('#aiiImg_'+idnum);
        //预览图片居中 填满 代码
        console.log('asdfasdfasdf');

        img.load(function(){
            var imgw=img.width(),
                imgh=img.height();
                console.log(imgw);
                console.log(imgh);
            if(imgw>imgh)
            {
                img.css('height','100%');
                img.css('width','auto');
                img.css('marginLeft',-(img.width()-img.height())/2+'px');
            }
            else if(imgw<imgh)
            {
                img.css('width','100%');
                img.css('height','auto');
                img.css('marginTop',-(img.height()-img.width())/2+'px');
            }
        });
    }

    function add_doc (base,idnum)
    {
        $('#aii_upload_form').append('<input type="hidden" name="img[]" id="f_'+idnum+'" value="'+base+'"/>');
    }
})(jQuery);
function img_remove(element)
{
    var num=$(element).prev().attr('idnum');
    $(element).parent().remove();
    $('#f_'+num).remove();
    console.log('asdf');
}
1
2
3
4
<section class="section">
    <div id="box"></div>
    <p style="color:red;">*样式修改请参考aiiUpload.css</p>
</section>
1
2
3
4
5
6
7
8
9
10
11
<!-- 掉用方式 -->
<script type="text/javascript">
    $('#box').aiiUpload({
        method:'POST',
        action:'form.php',
        max_h:300,
        max_w:300,
        subText:'上传图片',
        fileText:'选择图片'
    });
</script>

参考链接
https://segmentfault.com/a/1190000002535673

------本文结束 感谢阅读------